<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Yahoo Weather!</TITLE>
  <META NAME="Keywords" CONTENT="ajax, weather, api, fetch, yahoo">
  <META NAME="Description" CONTENT="yahoo, weather">

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />

<SCRIPT type="text/javascript">
<!--
/*
Credits: Bit Repository
URL: http://www.bitrepository.com/web-programming/ajax/show-yahoo-weather.html
*/

function get_weather(unit) {
    var p = $("#code").val();

    var u = unit == 'C' ? '&u=c' : '';
    var to_load = 'get_weather.php?p='+ p + u;

    $("#weather").html('<img style="margin-top: 104px;" src="ajax-loader.gif" align="absmiddle">');
    $("#weather").load(to_load);
}

$(document).ready(function(){
    $(window).load(get_weather); // Trigger "get_weather" when the window loads
    $("#code").change(get_weather);
});

//-->
</SCRIPT>

</HEAD>

 <BODY>

 <center>

<div align="center">

<form>
Weather for: 
<select id="code" name="code">
    <option value="USCA0830">Palo Alto</option>
    <option value="USCA1116">Sunnyvale</option>
    <option value="USCA0987">San Francisco</option>
    <option value="USCA0926">Redwood City</option>
    <option value="USCA0993">San Jose</option>
    <option value="USCA0273">Cupertino</option>
</select>
<a href="#" onclick=get_weather("F") id="F">F</a>/<a href="#" onclick=get_weather("C") id="C">C</a> 
</form>

<div id="weather"></div>
</div>
 </center>
 </BODY>
</HTML>
